/* 字体颜色 背景颜色 边框颜色 及 主题搭配 方案 */
@each $color, $value in ( 
    white: #FAFAFA,
    red: #F44336, 
    pink: #E91E63, 
    purple: #673AB7, 
    indigo: #3F51B5,
    blue: #2196F3,
    cyan: #00BCD4,
    teal: #009688,
    green: #4CAF50,  
    yellow: #FFEB3B, 
    amber: #FFC107, 
    orange: #FF9800, 
    orangered: #FF5722,
    brown: #795548,
    grey: #9E9E9E ) {
    .#{$color} {
        background-color: #{$value};
    }
    .text-#{$color} {
        color: #{$value};
    }
    @for $level from 1 to 4 {
        $ncolor: lighten($value, $level*10%);
        .#{$color}-l#{$level} {
            background-color: #{$ncolor};
        }
    }
    @for $nvel from 1 to 4 {
        $ncolor: darken($value, $nvel*4%);
        .#{$color}-d#{$nvel} {
            background-color: #{$ncolor};
        }
    }
    @for $num from 1 to 4 {
        $ncolor: lighten ($value, $num * 10%);
        .text-#{$color}-l#{$num} {
            color: #{$ncolor};
        }
    }
    @for $num from 1 to 4 {
        $ncolor: darken($value, $num * 10%);
        .text-#{$color}-d#{$num} {
            color: #{$ncolor};
        }
    }
}

@each $theme, $color in (primary: #409EFF, warning: #E6A23C, danger: #F56C6C, success: #67C23A, info: #909399) {
    $shadow: darken($color, 30%);
    $darken: darken($color, 15%);
    $plain: lighten($color, 27%);
    $lighten: lighten($color, 15%);
    .#{$theme} {
        background-color: #{$color};
        color: #F7F7F7;
        border-radius: 3px;
        box-shadow: -1px -1px 1px #{$shadow} inset;
    }
    .#{$theme}-plain {
        color: #{$darken};
        background: #{$plain};
        border: 1px solid #{$lighten};
        border-radius: 3px;
    }
}